/**
 * 通用Header组件
 * 用于所有二级页面的顶部标题栏
 */
window.CommonHeader = {
    /**
     * 生成通用header的HTML结构
     * @param {Object} options - 配置选项
     * @param {string} options.title - 页面标题，默认为"BrainHorm生理信号数据处理工具"
     * @param {string} options.subtitle - 副标题，默认为"专业的生理信号数据处理平台"
     * @returns {string} header的HTML字符串
     */
    generateHeaderHTML(options = {}) {
        const {
            title = '生理信号数据处理工具',
            subtitle = '专业的生理信号数据处理平台'
        } = options;

        return `
        <!-- 顶部标题栏 -->
        <header class="header">
            <div class="header-left">
                <button class="menu-toggle" @click="toggleSidebar">
                    ☰
                </button>
                <h1 class="header-title">${title}</h1>
            </div>
            <div class="header-right">
                <span style="font-size: 0.9rem; opacity: 0.9;">${subtitle}</span>
            </div>
        </header>
        `;
    },

    /**
     * 初始化header组件
     * 将header HTML插入到指定容器中
     * @param {string} containerId - 容器ID
     * @param {Object} options - 配置选项
     */
    initHeader(containerId, options = {}) {
        const container = document.getElementById(containerId);
        if (container) {
            const headerHTML = this.generateHeaderHTML(options);
            container.innerHTML = headerHTML + container.innerHTML;
        }
    },

    /**
     * 为Vue应用提供header组件的方法
     * @param {Object} vueApp - Vue应用实例
     * @param {Object} options - 配置选项
     */
    setupVueHeader(vueApp, options = {}) {
        // 添加header相关的方法到Vue实例
        if (vueApp && vueApp.methods) {
            // toggleSidebar方法通常已经在各页面中定义，这里不重复添加
            // 如果需要统一管理，可以在这里添加通用方法
        }
    }
};